<template>
  <q-page>
    <div class="container">
      <q-table ref="offsetTable"
               :columns="columns"
               :data="data"
               :filter="search"
               :no-data-label="$t('offset.noDataLabel')"
               :no-results-label="$t('offset.noResultLabel')">
        <template v-slot:top-right>
          <q-input borderless debounce="300" :label="$t('offset.search')" dense v-model="search">
            <q-icon slot="append" name="search"/>
          </q-input>
        </template>
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols"
                  :key="col.name"
                  :props="props">
              {{ $t(col.label) }}
            </q-th>
          </q-tr>
        </template>
        <template v-slot:no-data="{ message }">
          <div class="full-width text-center">
            {{ message }}
          </div>
        </template>
        <template v-slot:bottom="{ pagination, pagesNumber, isFirstPage, isLastPage, prevPage, nextPage }">
          <div class="row items-center justify-end">
            <div>{{ $t('offset.pageOfTotal', [pagination.page, pagesNumber]) }}</div>
            <q-btn flat round icon="mdi-chevron-left" :disable="isFirstPage"
                   @click="prevPage"/>
            <q-btn flat round icon="mdi-chevron-right" :disable="isLastPage"
                   @click="nextPage"/>
          </div>
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script>
  export default {
    name: "Offset",
    data: function () {
      return {
        search: '',
        columns: [
          {
            name: 'brand',
            label: 'offset.brand',
            field: 'brand',
            required: true,
            align: 'center',
            sortable: true,
            headerStyle: this.$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-black'
          },
          {
            name: 'model',
            label: 'offset.model',
            field: 'model',
            required: true,
            align: 'center',
            sortable: true,
            headerStyle: this.$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-black'
          },
          {
            name: 'server',
            label: 'offset.server',
            field: 'server',
            required: true,
            align: 'center',
            sortable: true,
            headerStyle: this.$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-black'
          },
          {
            name: 'inputOffset',
            label: 'offset.inputOffset',
            field: 'inputOffset',
            required: true,
            align: 'center',
            sortable: true,
            headerStyle: this.$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-black'
          },
          {
            name: 'audioOffset',
            label: 'offset.audioOffset',
            field: 'audioOffset',
            required: true,
            align: 'center',
            sortable: true,
            headerStyle: this.$q.dark.isActive ? 'bg-dark text-white' : 'bg-white text-black'
          }
        ],
        data: [
          {brand: 'HUAWEI', model: 'honor pad5', server: 'Bestdori', inputOffset: 0, audioOffset: 160}
        ]
      };
    }
  }
</script>

<style scoped>

</style>
